<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>管理系统</title>
	<style>
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: url(image/loginbeij.jpg) no-repeat;
			background-size: cover;
			min-width: 1440px;
		}

		.userbox {
			padding: 20px;
			border-radius: 4px;
			width: 30%;
			margin: 12% auto auto 53%;
		}

		.title {
			font-size: 48px;
			font-family: 微软雅黑, serif;
			color: #494949;
			text-align: center;
		}

		.input {
			border-bottom: thin solid #7c7c7c;
		}

		.input img {
			width: 30px;
			height: 30px;
			margin: 5px 40px 0 20px;
		}

		.input>div {
			display: inline-block;
			padding: 35px 0 25px;
			vertical-align: top;
		}

		input {
			border: none;
			line-height: 40px;
			font-size: 24px;
			background: none;
		}

		input:focus {
			outline: none;
		}

		button {
			background-image: linear-gradient(to right, #dceac9, #2bc1e4);
			width: 100%;
			border-radius: 30px;
			border: none;
			color: white;
			font-size: 18px;
			padding: 12px;
		}

		#msg {
			margin: 20px 0 0;
			color: red;
			height: 0;
		}
	</style>
</head>

<body>

	<form action="/api/login" method="post" id="form">
		<div class="userbox">
			<div class="title" style="margin-bottom: 20px">欢迎登录</div>
			<div class="input">
				<div>
					<img src="/image/username.svg">
				</div>
				<div>
					<input placeholder="请输入账号" id="user" name="username">
				</div>
			</div>
			<div class="input">
				<div>
					<img src="/image/password.svg">
				</div>
				<div>
					<input placeholder="请输入密码" id="password" name="password" type="password" value="">
				</div>
			</div>
			<div class="input">
				<div>
					<img src="/image/code.svg">
				</div>
				<div>
					<input placeholder="请输入验证码" style="width: 200px" name="code" autocomplete="off">
				</div>
				<div>
					<img id="code" src="/api/captcha.jpg" alt="验证码" title="点我刷新"
						onclick="this.src='/api/captcha.jpg?'+new Date().getTime()"
						style="width: 100px;height: 48px;margin: -4px 0 -4px 30px;" />
				</div>
			</div>

			<div id="msg"></div>

			<div style="width: 200px;margin: 60px auto 0">
				<button>登录</button>
			</div>
			<a href="http://www.miit.gov.cn" target="_blank" style="text-decoration:none;color:black;position: fixed;bottom: 5vh;left: calc((100vw - 200px)/2);">备案号:粤ICP备17102741号</a>

		</div>
	</form>

	<script>
		var dg = document.getElementById.bind(document);
		var s = sessionStorage;

		dg('form').onsubmit = function () {
			s['hxt-u'] = dg('user').value;
			s['hxt-p'] = dg('password').value;
		};

		var u = s['hxt-u'];
		var p = s['hxt-p'];
		if (u) dg('user').value = u;
		if (p) dg('password').value = p;
		s.removeItem('hxt-p');

		var q = location.search;
		if (q) {
			q = q.substr(1);
			dg('msg').innerText = {
				error: '用户名或密码错误！',
				code: '验证码错误！', logout: '退出成功！'
			}[q];
		}
	</script>

</body>

</html>